<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 菜单管理 </el-breadcrumb-item>
                <el-breadcrumb-item>菜单详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-divider content-position="left">菜单详情</el-divider>

                    <el-form-item label="菜单名称" prop="name">
                        <el-input v-model="form.name" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="菜单级别" prop="level">
                       <el-select v-model="form.level" placeholder="级别" disabled>
                            <el-option label="一级菜单" value="01"> </el-option>
                            <el-option label="二级菜单" value="02"> </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="父级菜单" prop="parentId" v-if="form.level=='02'">
                        <el-input v-model="firstMenu.name" disabled>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="图标" prop="icon" v-if="form.level=='01'">
                        <el-input v-model="form.icon" placeholder="请输入图标的代码" disabled></el-input>
                    </el-form-item>

                     <el-form-item label="路径" prop="url" v-if="form.level=='02'">
                        <el-input v-model="form.url" placeholder="请输入路径" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="状态">
                        <el-switch v-model="form.status" :active-value="'01'" :inactive-value="'00'" disabled></el-switch>
                    </el-form-item>

                    


                    <el-form-item label="资源描述" prop="description">
                        <el-input type="textarea" rows="5" v-model="form.description" disabled></el-input>
                    </el-form-item>
                     <el-form-item>
                        <el-button @click="goback" icon="el-icon-arrow-left">返回</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'baseform',
    inject: ['reload'],
    data() {
        return {
            id: this.$route.query.id,
            // permissions: [],
            types:[],
            firstMenu:{},
            menu:{},
            form: {
                id:'',
                name: '',
                level:'',
                parentId:'',
                icon:'',
                url:'',
                status: '',
                description: ''
            }
        };
    },
    created: function () {
        
        this.init();
    },
    methods: {
        async init() {
            var a = await this.$http.get('/menu/' + this.id);
            if (a.code == 200) {
                this.menu = a.data;
                this.initForm(this.menu)
                if (this.form.level=='02') {
                    this.getFirstMenu(this.form.parentId)
                }
            } else {
                this.$message.error(a.message);
            }
        },

        async getFirstMenu(id){
            var a = await this.$http.get('/menu/' + id);
            if (a.code == 200) {
                this.firstMenu = a.data;
            } else {
                this.$message.error(a.message);
            }
        },
        initForm(menu){
            this.form.id=this.id
            this.form.name=menu.name;
            this.form.parentId=menu.parentId;
            this.form.icon=menu.icon;
            this.form.url=menu.url;
            this.form.level=menu.level;
            this.form.status=menu.status;
            this.form.description=menu.description;
        },

        goback(){
            this.$router.go(-1);
        },
       
    
    }
};
</script>